<template>
    <div class="sign-pay">
        <AppHeader>签到支付</AppHeader>
        <div class="body">
            <div class="placeholder"></div>
            <div class="pay-info">
                <div>金额</div>
                <div class="money">￥1.00</div>
            </div>
            <div class="placeholder"></div>
            <AppPayCard type="账户余额" introduce="安全快捷" :checked="payType === '1'" :disable="true">
                <img slot="logo" src="../assets/image/account.png">
            </AppPayCard>
            <AppPayCard type="微信支付" introduce="安全快捷" :recommend="true" :checked="payType === '2'" @check="onCheck('2')">
                <img slot="logo" src="../assets/image/wxpay.png">
            </AppPayCard>
            <AppPayCard type="支付宝支付" introduce="支付宝付款更快更安全" :checked="payType === '3'" :disable="true">
                <img slot="logo" src="../assets/image/alipay.png">
            </AppPayCard>
        </div>
        <div class="pay-btn" @click="pay">
            去支付
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .sign-pay {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 16/3.75+vw;
        height: 100vh;
        .body {
            flex: 1;
            .placeholder {
                height: 10/3.75+vw;
                background: #f2f2f2;
            }
            .pay-info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20/3.75+vw 15/3.75+vw;
                .money {
                    color: #f20;
                }
            }
        }
        .pay-btn {
            width: 100%;
            height: 50/3.75+vw;
            line-height: 50/3.75+vw;
            text-align: center;
            font-size: 18/3.75+vw;
            color: #fff;
            background: #29449B;
        }
    }
</style>
<script>
    import AppHeader from '../components/AppHeader';
    import AppPayCard from "../components/AppPayCard";
    export default {
        data() {
            return {
                payType: '2'
            }
        },
        components: {
            AppPayCard,
            AppHeader
        },
        methods: {
            onCheck(type) {
                this.payType = type;
            },
            pay() {
                console.log(this.$route.query);
                let { appid, partnerId, prepayId, packageValue, nonceStr, sign, timeStamp } = this.$route.query;
                window.navtiveDevice.pay(appid, partnerId, prepayId, packageValue, nonceStr, sign, timeStamp);
            }
        }
    }
</script>
